import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
import { Breadcrumb, Layout } from 'antd';
import StreamerTable from './StreamerTable';
import RecordTable from './RecordTable';
 

const { Header, Content } = Layout;

// 面包屑导航组件
const BreadcrumbNav = () => {
  const location = useLocation();
  const pathSnippets = location.pathname.split('/').filter(i => i);
  
  const breadcrumbNameMap: Record<string, string> = {
    '': '首页',
    'streamers': '主播表',
    'records': '直播录制表',
  };

  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>{breadcrumbNameMap[pathSnippets[index]]}</Link>
      </Breadcrumb.Item>
    );
  });

  const breadcrumbItems = [
    <Breadcrumb.Item key="home">
      <Link to="/">首页</Link>
    </Breadcrumb.Item>,
  ].concat(extraBreadcrumbItems);

  return <Breadcrumb style={{ margin: '16px 0' }}>{breadcrumbItems}</Breadcrumb>;
};

function App() {
  return (
    <Router>
      <Layout style={{ minHeight: '100vh' }}>
        <Header style={{ background: '#fff', padding: '0 20px' }}>
          <div style={{ display: 'flex', gap: '20px' }}>
            <Link to="/">首页</Link>
            <Link to="/streamers">主播表</Link>
            <Link to="/records">直播录制表</Link>
          </div>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <BreadcrumbNav />
          <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
            <Routes>
              <Route path="/" element={<div>欢迎使用直播管理系统</div>} />
              <Route path="/streamers" element={<StreamerTable />} />
              <Route path="/records" element={<RecordTable />} />
            </Routes>
          </div>
        </Content>
      </Layout>
    </Router>
  );
}

export default App;
